import { useParams, Link } from 'react-router-dom';
import { StarIcon, CalendarIcon, ArrowLeftIcon } from 'lucide-react';
import { usePageTitle } from '../hooks/usePageTitle';
import { ImageWithLoader } from '../components/ImageWithLoader';

export function ReviewDetail() {
  const {
    id
  } = useParams<{
    id: string;
  }>();
  // Mock data for reviews - in a real app, this would come from an API
  const reviews = {
    '1': {
      id: '1',
      title: 'Bosch Series 8 Smart Oven Review',
      image: 'https://images.unsplash.com/photo-1631679706909-1844bbd07221?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1992&q=80',
      category: 'Kitchen',
      rating: 4.6,
      date: 'May 15, 2023',
      author: 'Sarah Johnson',
      authorImage: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80',
      pros: ['Intuitive touchscreen interface', 'Precise temperature control', 'Multiple cooking modes', 'Home Connect app integration', 'Self-cleaning pyrolytic function'],
      cons: ['Premium price point', 'App requires occasional reconnection', 'Learning curve for advanced features'],
      verdict: 'The Bosch Series 8 Smart Oven represents the pinnacle of home cooking technology, offering professional-grade results with consumer-friendly controls. While the price point is high, the performance and features justify the investment for serious home cooks.',
      rating_breakdown: {
        Design: 4.8,
        Performance: 4.7,
        'Smart Features': 4.5,
        'Ease of Use': 4.4,
        Value: 4.2
      },
      content: "The Bosch Series 8 Smart Oven represents the cutting edge of kitchen technology, combining traditional cooking excellence with modern smart home integration. After extensive testing in our labs and real-world kitchen environments, we've evaluated its performance across multiple cooking scenarios.\n\nThis premium wall oven features a sleek touchscreen interface, multiple cooking modes including convection and steam options, and seamless integration with Bosch's Home Connect app. But does its performance justify the premium price tag? Let's dive into our comprehensive review.\n\nPerformance is where this oven truly shines. In our temperature accuracy tests, the Series 8 maintained temperatures within ±5°F of the target—significantly better than most competitors. The convection system created remarkably even browning, eliminating the need to rotate pans mid-bake. The steam assist function produced bakery-quality bread with crisp crusts and tender interiors.\n\nThe Home Connect app extends functionality beyond the kitchen, allowing you to preheat the oven remotely, access specialized cooking programs, and receive notifications when your food is ready. While we experienced occasional connectivity issues requiring app reconnection, the overall smart experience was polished and practical rather than gimmicky."
    },
    '2': {
      id: '2',
      title: 'Dyson Pure Cool TP07 Air Purifier Review',
      image: 'https://images.unsplash.com/photo-1594142243342-41d20b96e928?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80',
      category: 'Climate',
      rating: 4.8,
      date: 'April 10, 2023',
      author: 'Michael Torres',
      authorImage: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80',
      pros: ['Exceptional HEPA H13 filtration', 'Detailed air quality monitoring', 'Powerful air circulation', 'Quiet operation at low settings', 'Elegant, space-efficient design'],
      cons: ['Premium price point', 'Replacement filters are expensive', 'Fan noise is noticeable at higher settings'],
      verdict: 'The Dyson Pure Cool TP07 sets the standard for air purifiers with its combination of powerful filtration, intelligent monitoring, and versatile functionality. While the initial cost and filter replacement expenses are significant, the performance and feature set make it a worthwhile investment for those serious about air quality.',
      rating_breakdown: {
        'Filtration Efficiency': 4.9,
        'Air Quality Monitoring': 4.8,
        'Smart Features': 4.7,
        'Noise Level': 4.5,
        Value: 4.2
      },
      content: "The Dyson Pure Cool TP07 represents the latest evolution in Dyson's air purifier lineup, combining the company's air multiplication technology with advanced filtration and smart features. After testing it in various home environments over several months, we've found it to be exceptionally effective at improving indoor air quality.\n\nThe TP07 uses a HEPA H13 filter that captures 99.95% of particles as small as 0.1 microns, including allergens, bacteria, and viruses. The activated carbon layer effectively removes odors and volatile organic compounds (VOCs). In our testing, the unit reduced particulate matter by over 95% in a 350 square foot room within 30 minutes.\n\nWhat sets the TP07 apart is its detailed air quality monitoring. The LCD display shows real-time levels of PM2.5, PM10, VOCs, and NO2, with color-coded indicators for at-a-glance assessment. The Dyson Link app provides historical data and allows you to track air quality improvements over time.\n\nOperation is intuitive through both the included remote and voice commands via Alexa, Siri, or Google Assistant. Auto mode effectively balances filtration needs with noise levels, ramping up when pollution is detected and quieting down when air quality improves. Night mode dims the display and limits fan speed for quieter operation during sleep hours."
    },
    '3': {
      id: '3',
      title: 'Nest x Yale Smart Lock: Long-term Test',
      image: 'https://images.unsplash.com/photo-1582555172866-f73bb12a2ab3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
      category: 'Security',
      rating: 4.5,
      date: 'March 22, 2023',
      author: 'Jennifer Lee',
      authorImage: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1961&q=80',
      pros: ['Sleek, tamper-resistant design', 'Seamless Google Home integration', 'Reliable keyless entry', 'Easy guest access management', 'Battery backup for power outages'],
      cons: ['Requires Google ecosystem for full functionality', 'No fingerprint or physical key backup', 'Higher price than some competitors'],
      verdict: 'After six months of daily use, the Nest x Yale Smart Lock proves to be a reliable, secure, and convenient addition to any Google-centric smart home. While it lacks some features found in competing locks, its seamless integration with Nest cameras and Google Assistant makes it the ideal choice for homes already invested in the Google ecosystem.',
      rating_breakdown: {
        Security: 4.7,
        Reliability: 4.6,
        'Smart Features': 4.8,
        Installation: 4.3,
        Value: 4.0
      },
      content: 'After six months of daily use, we\'re ready to deliver our long-term verdict on the Nest x Yale Smart Lock. This keyless deadbolt has become an integral part of our smart home testing environment, handling everything from daily comings and goings to vacation guest access.\n\nInstallation was straightforward, requiring about 30 minutes and basic DIY skills. The lock replaces your existing deadbolt and connects to your home network via the included Nest Connect bridge. The tamper-resistant exterior has no keyhole to pick, while the interior housing contains the mechanical controls and batteries.\n\nDay-to-day reliability has been impressive. The touch keypad wakes with a tap and responds quickly to code entry. The auto-lock feature has been consistent, engaging the deadbolt after our preset delay. Battery life has exceeded expectations, with our unit at 40% capacity after six months of use by a family of four.\n\nThe integration with Google Home provides valuable features beyond basic locking and unlocking. We particularly appreciated the ability to check lock status remotely, receive notifications when the door is unlocked, and include the lock in routines (like automatically locking when we say "Hey Google, goodnight"). When paired with a Nest doorbell camera, you can see who\'s at the door and unlock it from the same screen.'
    },
    '4': {
      id: '4',
      title: 'Samsung Smart Washer-Dryer Combo Review',
      image: 'https://images.unsplash.com/photo-1604335399105-a0c585fd81a1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
      category: 'Laundry',
      rating: 4.4,
      date: 'February 18, 2023',
      author: 'David Wong',
      authorImage: 'https://images.unsplash.com/photo-1566492031773-4f4e44671857?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80',
      pros: ['Space-saving all-in-one design', 'AI-powered fabric detection', 'Remote monitoring via smartphone', 'Ventless drying technology', 'Energy and water efficient'],
      cons: ['Longer cycle times than separate machines', 'Smaller capacity than standalone units', 'Drying performance varies by fabric type'],
      verdict: "The Samsung Smart Washer-Dryer Combo offers an impressive solution for small spaces, delivering good cleaning performance and adequate drying in a single compact unit. While it can't match the speed or capacity of separate machines, its smart features and space-saving design make it ideal for apartments, condos, or small homes where space is at a premium.",
      rating_breakdown: {
        'Washing Performance': 4.6,
        'Drying Performance': 4.0,
        'Smart Features': 4.7,
        'Energy Efficiency': 4.5,
        Value: 4.2
      },
      content: "The Samsung Smart Washer-Dryer Combo addresses a specific need in today's housing market: providing complete laundry functionality in spaces too small for separate machines. After testing this unit for three months in a compact apartment setting, we've developed a comprehensive understanding of its strengths and limitations.\n\nThe standout feature is Samsung's AI-powered fabric detection system, which automatically adjusts water levels, wash action, and temperature based on the load's weight and fabric types. In our testing, this technology consistently selected appropriate settings, with particularly impressive results on mixed loads that would typically require manual sorting.\n\nWashing performance rivals that of standalone machines, with excellent stain removal on our test swatches. The unit handled everything from delicates to heavily soiled work clothes with appropriate care and cleaning power. The steam sanitizing option effectively reduced allergens and refreshed lightly worn items.\n\nDrying performance, while adequate, reveals the inherent limitations of combination units. A full load of laundry typically requires 2-3 hours for complete drying, significantly longer than a standalone dryer. We found best results with smaller loads, which dried more evenly and quickly. The ventless heat pump technology is gentle on fabrics but struggles with thick items like towels and jeans."
    },
    '5': {
      id: '5',
      title: 'LG InstaView Door-in-Door Refrigerator Review',
      image: 'https://images.unsplash.com/photo-1584568694244-14fbdf83bd30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80',
      category: 'Kitchen',
      rating: 4.7,
      date: 'January 25, 2023',
      author: 'Emily Rodriguez',
      authorImage: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1976&q=80',
      pros: ['Innovative knock-to-view window', 'Spacious, well-designed interior', 'Precise temperature control', 'Energy efficient operation', 'Smart home connectivity'],
      cons: ['Premium price point', 'Door-in-door section reduces main door insulation', 'Ice maker reduces freezer space'],
      verdict: 'The LG InstaView Door-in-Door Refrigerator successfully balances innovation with functionality, offering practical features that enhance everyday use rather than gimmicks. While the premium price will deter some buyers, the combination of energy efficiency, temperature performance, and thoughtful design make it a worthwhile investment for those seeking a high-end refrigerator.',
      rating_breakdown: {
        'Cooling Performance': 4.8,
        'Design & Features': 4.9,
        'Energy Efficiency': 4.6,
        'Noise Level': 4.7,
        Value: 4.3
      },
      content: "The LG InstaView Door-in-Door refrigerator represents the modern evolution of a kitchen staple, combining innovative features with strong fundamental performance. After three months of testing in a busy household kitchen, we've evaluated both its flashy features and essential functions.\n\nThe signature InstaView feature—a panel that becomes transparent when knocked on—proves surprisingly useful in daily life. Being able to check contents without opening the door reduced our test household's door openings by approximately 30%, contributing to better temperature stability and energy efficiency. The door-in-door compartment provides convenient access to frequently used items, though thermal imaging confirmed it does create a slightly warmer zone in the main compartment.\n\nCooling performance impressed across all areas of the refrigerator. Our temperature mapping tests showed consistent temperatures throughout the main compartment, with minimal fluctuation during defrost cycles. The sealed crisper drawers maintained optimal humidity levels, extending the freshness of produce by several days compared to standard drawers. The linear compressor operated quietly at 39 dB during normal operation, with brief increases to 42 dB during cooling cycles.\n\nThe interior layout maximizes usable space with adjustable shelving, including a versatile split shelf that accommodates taller items. LED lighting illuminates all areas effectively, with no dark corners or shadows. The ice and water dispenser delivered filtered water consistently, though the ice production rate of 3.5 pounds per day may be insufficient for heavy ice users."
    }
  };
  // Use the ID to get the specific review, or default to the first one if not found
  const review = reviews[id as keyof typeof reviews] || reviews['1'];
  
  // Set page title
  usePageTitle(review.title);
  
  // Find related reviews - in a real app, this would be more sophisticated
  const relatedReviews = Object.values(reviews).filter(r => r.category === review.category && r.id !== review.id).slice(0, 3).map(r => ({
    id: r.id,
    title: r.title,
    image: r.image,
    category: r.category,
    rating: r.rating
  }));
  return <div className="w-full bg-white">
      {/* Hero image */}
      <div className="relative w-full h-96">
        <ImageWithLoader src={review.image} alt={review.title} className="w-full h-full object-cover" />
        <div className="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
        <div className="absolute bottom-0 left-0 right-0 p-8">
          <div className="container mx-auto">
            <div className="flex items-center mb-2">
              <span className="bg-[#d4a373] text-white text-sm px-2 py-1 rounded">
                {review.category}
              </span>
              <div className="ml-4 flex items-center">
                <StarIcon size={18} className="text-[#ffd166] fill-[#ffd166]" />
                <span className="ml-1 text-white font-medium">
                  {review.rating}/5
                </span>
              </div>
            </div>
            <h1 className="text-3xl md:text-4xl font-bold text-white mb-2">
              {review.title}
            </h1>
            <div className="flex items-center text-white text-sm">
              <CalendarIcon size={16} className="mr-1" />
              <span>Published: {review.date}</span>
              <span className="mx-2">•</span>
              <span>By {review.author}</span>
            </div>
          </div>
        </div>
      </div>
      {/* Breadcrumb */}
      <div className="bg-[#f8f9fa] border-b">
        <div className="container mx-auto px-4 py-3">
          <div className="flex items-center text-sm">
            <Link to="/" className="text-gray-500 hover:text-[#d4a373]">
              Home
            </Link>
            <span className="mx-2 text-gray-400">/</span>
            <Link to="/reviews" className="text-gray-500 hover:text-[#d4a373]">
              Reviews
            </Link>
            <span className="mx-2 text-gray-400">/</span>
            <span className="text-gray-700">{review.title}</span>
          </div>
        </div>
      </div>
      {/* Review content */}
      <div className="container mx-auto px-4 py-8">
        <div className="max-w-4xl mx-auto">
          {/* Author info */}
          <div className="flex items-center mb-8 pb-6 border-b">
            <ImageWithLoader src={review.authorImage} alt={review.author} className="w-12 h-12 rounded-full object-cover mr-4" />
            <div>
              <p className="font-medium">Reviewed by {review.author}</p>
              <p className="text-sm text-gray-500">
                {review.category} Specialist
              </p>
            </div>
          </div>
          {/* Introduction */}
          <div className="prose max-w-none mb-8">
            {review.content.split('\n\n').map((paragraph, index) => <p key={index} className={index === 0 ? 'text-lg font-medium leading-relaxed' : 'text-gray-700 leading-relaxed mb-4'}>
                {paragraph}
              </p>)}
          </div>
          {/* Pros and Cons */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
            <div className="bg-[#f8f9fa] p-6 rounded-lg">
              <h3 className="text-xl font-bold mb-4 text-green-600">Pros</h3>
              <ul className="space-y-2">
                {review.pros.map((pro, index) => <li key={index} className="flex items-start">
                    <span className="text-green-500 font-bold mr-2">✓</span>
                    <span>{pro}</span>
                  </li>)}
              </ul>
            </div>
            <div className="bg-[#f8f9fa] p-6 rounded-lg">
              <h3 className="text-xl font-bold mb-4 text-red-600">Cons</h3>
              <ul className="space-y-2">
                {review.cons.map((con, index) => <li key={index} className="flex items-start">
                    <span className="text-red-500 font-bold mr-2">✗</span>
                    <span>{con}</span>
                  </li>)}
              </ul>
            </div>
          </div>
          {/* Rating breakdown */}
          <div className="mb-10">
            <h3 className="text-2xl font-bold mb-6">Rating Breakdown</h3>
            {Object.entries(review.rating_breakdown).map(([category, score]) => <div key={category} className="mb-4">
                  <div className="flex justify-between mb-1">
                    <span className="font-medium">{category}</span>
                    <span>{score}/5</span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2.5">
                    <div className="bg-[#d4a373] h-2.5 rounded-full" style={{
                width: `${score / 5 * 100}%`
              }}></div>
                  </div>
                </div>)}
          </div>
          {/* Verdict */}
          <div className="bg-[#343a40] text-white p-6 rounded-lg mb-10">
            <h3 className="text-xl font-bold mb-3">Our Verdict</h3>
            <p>{review.verdict}</p>
            <div className="mt-4 flex items-center">
              <div className="mr-2 text-2xl font-bold">{review.rating}</div>
              <div className="flex">
                {[1, 2, 3, 4, 5].map(star => <StarIcon key={star} size={20} className={star <= Math.floor(review.rating) ? 'text-[#ffd166] fill-[#ffd166]' : 'text-gray-400'} />)}
              </div>
            </div>
          </div>
          {/* Back to reviews */}
          <div className="mt-12 mb-8">
            <Link to="/reviews" className="flex items-center text-[#d4a373] hover:underline">
              <ArrowLeftIcon size={16} className="mr-2" />
              Back to all reviews
            </Link>
          </div>
        </div>
      </div>
      {/* Related reviews */}
      <section className="bg-[#f8f9fa] py-12">
        <div className="container mx-auto px-4">
          <h3 className="text-2xl font-bold mb-8">Related Reviews</h3>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {relatedReviews.map(relatedReview => <Link key={relatedReview.id} to={`/reviews/${relatedReview.id}`} className="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow">
                <ImageWithLoader src={relatedReview.image} alt={relatedReview.title} className="w-full h-48 object-cover" />
                <div className="p-4">
                  <div className="flex items-center mb-2">
                    <span className="bg-[#343a40] text-white text-xs px-2 py-1 rounded">
                      {relatedReview.category}
                    </span>
                    <div className="ml-2 flex items-center">
                      <StarIcon size={14} className="text-[#ffd166] fill-[#ffd166]" />
                      <span className="ml-1 text-xs">
                        {relatedReview.rating}/5
                      </span>
                    </div>
                  </div>
                  <h4 className="font-bold line-clamp-2">
                    {relatedReview.title}
                  </h4>
                </div>
              </Link>)}
          </div>
        </div>
      </section>
    </div>;
}